<template>
  <div class="zh-table">
    <div>分类</div>
    <div>一级指标</div>
    <div>一级指标权重</div>
    <div>二级指标</div>
    <div>二级指标权重</div>
    <div>得分</div>
    <div>固有风险评价</div>
    <div class="type">
        <el-button
            size="large"
            :class="{active:activeIndex==index}"
            type="primary"
            v-for="(btn,index) in btns"
            @click="clickHandle(index)"
        >{{btn}}</el-button>
    </div>
    <div class="zb_1_01">
      当地洗钱、恐怖融资与（广义）上游犯罪形势，是否毗邻洗钱、恐怖融资或上游犯罪、恐怖主义活动活跃的境外国家和地区。
    </div>
    <div class="zb_1_01_df">
      <el-input-number v-model="aIndex1" :precision="2" :step="0.1" :min="0" :max="100" label="一级指标权重"></el-input-number>
    </div>
    <div class="zb_2_01">
      是否毗邻洗钱、恐怖融资或上游犯罪、恐怖主义活动活跃的境外国家和地区。
    </div>
    <div class="zb_2_01_df">
      <el-input-number v-model="bIndex1" :precision="2" :step="0.1" :min="0" @change="handleChangebIndex1" :max="100" label="二级指标权重"></el-input-number>
    </div>
    <div class="df">
      <el-input-number v-model="score1" :min="0" :max="100" label="得分"></el-input-number>
    </div>
    <div class="eval_01">
      <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="evaluation">
      </el-input>
    </div>
    <div class="zb_1_02">
      接受司法机关刑事查询、冻结、扣划和监察机关、公安机关查询、冻结、扣划情况（以下简称刑事查冻扣）中涉及该地区的客户数量、交易金额、资产规模等
    </div>
    <div class="zb_1_02_df">
      <el-input-number v-model="aIndex2" :precision="2" :step="0.1" :min="0" :max="100" label="一级指标权重"></el-input-number>
    </div>
    <div>毗邻洗钱、恐怖融资或上游犯罪、恐怖主义活动活跃的境外国家和地区数量</div>
    <div>
      <el-input-number v-model="bIndex2" :precision="2" :step="0.1" :min="0" :max="100" label="二级指标权重"></el-input-number>
    </div>
    <div>
      <el-input-number v-model="score2" :min="0" :max="100" label="得分"></el-input-number>
    </div>
    <div>该地区涉及刑事查冻扣客户数量</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div class="eval_02">
      <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="evaluation">
      </el-input>
    </div>
    <div>该地区涉及刑事查冻扣客户的交易金额</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div>该地区涉及刑事查冻扣客户账户余额</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div class="zb_1_03">本机构上报的涉及当地的一般可疑交易和重点可疑交易报告数量及客户数量 、交易金额</div>
    <div class="zb_1_03_df"> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div>该地区报送一般可疑交易报告数量</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div>该地区报送一般可疑交易报告涉及客户数量</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div>该地区报送一般可疑交易报告涉及交易金额</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div>该地区报送重点可疑交易报告数量</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div>该地区报送重点可疑交易报告涉及客户数量</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div>该地区报送重点可疑交易报告涉及交易金额</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div class="eval_03">
      <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="evaluation">
      </el-input>
    </div>
    <div class="zb_1_04">
      本机构在当地网点数量、客户数量、客户资产规模、交易金额及市场占有率水平
    </div>
    <div class="zb_1_04_df">
      <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number>
    </div>
    <div>该地区网点数量</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div class="eval_04">
      <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="evaluation">
      </el-input>
    </div>
    <div>该地区客户数量</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div>该地区所有客户的定期、活期及理财产品、基金账户余额</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div>该地区评估期内所有客户交易金额</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div>该地区的市场占有率</div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
    <div> <el-input-number v-model="num" @change="handleChange" :min="0" :max="100" label="一级指标权重"></el-input-number></div>
  </div>

</template>

<script>
import {reactive, ref} from 'vue'
export default {
  name: "GeoRisk",
  setup(props,context){
    const btns = reactive(['贵阳市','遵义市','铜仁市','安顺市','六盘水市','毕节市','黔东南州','黔西南州','黔南州','成都市']);
    let activeIndex = ref(0);
    let aIndex1 = ref(0);
    let aIndex2 = ref(0);
    let bIndex1 = ref(0);
    let bIndex2 = ref(0);
    let score1 = ref(0);
    let score2 = ref(0);
    let num = ref(0);
    let evaluation = ref("")
    const clickHandle = (index)=>{
      activeIndex.value = index;
    }
    const handleChangebIndex1 = (value)=>{
      aIndex1.value = value*score1.value+bIndex2.value*score2.value;
    }
    const handleChange = (value)=>{
      console.log(value);
    }
    return {
      btns,
      activeIndex,
      clickHandle,
      aIndex1,
      aIndex2,
      bIndex1,
      bIndex2,
      score1,
      score2,
      num,
      handleChange,
      handleChangebIndex1,
      evaluation
    }
  }
}
</script>

<style lang="scss">
  .zh-table{
    width: 100%;
    height: calc(100vh - 93px);
    overflow: auto;
    box-sizing: border-box;
    padding: 30px;
    display: grid;
    grid-template-rows:repeat(16,[r-start] 1fr [r-end]);
    grid-template-columns: repeat(7,[c-start] 1fr [c-end]);

    &>div{
      border: 1px solid #3a8ee6;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      margin-right:-1px;
      margin-bottom:-1px;
      padding: 10px;
    }
    .type{
      grid-row-start: r-start 2;
      grid-row-end: r-start 17;
      grid-column-end: c-end 1;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .el-button{
        width:100%;
        margin: 0;
        background-color: #142a58;
        &.active{
          background-color: #3a8ee6;
        }
      }
    }
    .zb_1_01{
      grid-row: r-start 2/r-start 4;
      grid-column: c-start 2/c-end 2;
    }
    .zb_1_01_df{
      grid-row: r-start 2/r-start 4;
      grid-column: c-start 3/c-end 3;
    }
    .eval_01{
      grid-row: r-start 2/r-start 4;
      grid-column: c-start 7/c-end 7;
    }
    .el-input--small{
      height: 100%;
      .el-textarea__inner{
        height: 100%;
        border-radius: 0;
        background-color: transparent;
        border: none;
        color: #fff;
      }
    }
    .zb_1_02{
      grid-row: r-start 4/r-start 7;
      grid-column: c-start 2/c-end 2;
    }
    .zb_1_02_df{
      grid-row: r-start 4/r-start 7;
      grid-column: c-start 3/c-end 3;
    }
    .eval_02{
      grid-row: r-start 4/r-start 7;
      grid-column: c-start 7/c-end 7;
    }
    .zb_1_03{
      grid-row: r-start 7/r-start 13;
      grid-column: c-start 2/c-end 2;
    }
    .zb_1_03_df{
      grid-row: r-start 7/r-start 13;
      grid-column: c-start 3/c-end 3;
    }
    .eval_03{
      grid-row: r-start 7/r-start 13;
      grid-column: c-start 7/c-end 7;
    }
    .zb_1_04{
      grid-row: r-start 13/r-start 18;
      grid-column: c-start 2/c-end 2;
    }
    .zb_1_04_df{
      grid-row: r-start 13/r-start 18;
      grid-column: c-start 3/c-end 3;
    }
    .eval_04{
      grid-row: r-start 13/r-start 18;
      grid-column: c-start 7/c-end 7;
    }
    .el-input__inner{
      background-color: #172643;
      color: #fff;
      border: 1px solid #4268c1;
    }
    .el-input__inner, .el-textarea__inner{
      color: #fff;
    }
    .el-input-number__decrease{
      border-right: 1px solid #3d61b6;
    }
    .el-input-number__increase{
      border-left: 1px solid #3d61b6;
    }
    .el-input-number__decrease, .el-input-number__increase{
      background: #132345;
      color: #fff;
    }
  }
</style>